import {useState,useEffect} from 'react'
import axios from 'axios'
import './ProductList.scss'
import {useNavigate} from 'react-router-dom'
export default ()=>{
    const nav=useNavigate()
    const [page,setPage]=useState({
        total:0,
        rows:[]
    })
    //从后端查询商品信息
    const getGoods=async()=>{
        const result=await axios.get("http://xawn.x3322.net:8012/gen/goods",{
            params:{
                pageSize:10,
                pageNum:1
            },
            headers:{
                'Content-Type':"application/x-www-form-urlencoded",
                "Authentication":localStorage.getItem("token")
            }
        })
        console.log('result',result);
        setPage({
           ...page,
           rows:result.data.rows 
        })
    }
    const goUpdateProduct=(arg)=>{
        nav(`/productUpdate?productId=${arg}`)
    }
    const goDetailProduct=(arg)=>{
        nav(`/productDetail/${arg}`)
    }

    useEffect(()=>{
        getGoods()
    },[])
    return (<>
        <div>商品管理</div>
        <table>
            <thead>
                <tr>
                    <td>
                        <input type='checkbox'></input>
                    </td>
                    <td>图片</td>
                    <td>名称</td>
                    <td>商品类型</td>
                    <td>状态</td>
                    <td>价格</td>
                    <td>数量</td>
                    <td>点赞数</td>
                    <td>操作</td>
                </tr>
            </thead>
            <tbody>
               {
                 page.rows.length>0&&page.rows.map(item=><tr key={item.id}>
                    <td><input type='checkbox'></input></td>
                    <td><img src={item.photo} alt="" width={40}/></td>
                    <td className='name'>{item.name}</td>
                    <td>{item.gname}</td>
                    <td>{item.status}</td>
                    <td>{item.price}</td>
                    <td>{item.counts}</td>
                    <td>{item.likes}</td>
                    <td>
                        <button onClick={()=>{goUpdateProduct(item.id)}}>修改</button>
                        <button onClick={()=>{goDetailProduct(item.id)}}>查看</button>
                    </td>
                 </tr>)
               }
            </tbody>

        </table>
    </>)
}